<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>异步相关</title>
  </head>
  <body>
    <script>
      function ajax(url, callback) {
        const xhr = new XMLHttpRequest()
        //   配置环节
        xhr.open('GET', url)
        // 相应类型
        xhr.responseType = 'json'
        //   发送
        xhr.send()
        //   发送完毕处理结果
        xhr.onload = () => {
          if (xhr.status == 200) {
            callback(xhr.response)
          } else {
            console.log(`${xhr.status}:${xhr.responseText}`)
          }
        }
      }
      ajax('hd.php', (response) => {
        console.log(response)
        appendElemnt(response)
      })

      function appendElemnt(data) {
        const ul = document.createElement('ul')
        data.map((item) => {
          const li = document.createElement('li')
          li.textContent = item.title
          ul.insertAdjacentElement('beforeend', li)
        })
        document.body.appendChild(ul)
      }
    </script>
  </body>
</html>
